<template>
	<view class="accountManage">
		
		<view class="bottom-box">
			<view class="b-item-box">
				<view class="b-left-box">
					原密码
				</view>
				<text class="info-box">
					<uv-input border="none" type="password" :customStyle="{height:'100%'}" v-model="form.oldpassword" placeholder="请输入原密码"></uv-input>
					
				</text>
			</view>
			<view class="b-item-box">
				<view class="b-left-box">
					新密码
				</view>
				<text class="info-box">
					<uv-input border="none" type="password" :customStyle="{height:'100%'}" v-model="form.newpassword" placeholder="请输入新密码"></uv-input>
					
				</text>
			</view>
			<view class="b-item-box">
				<view class="b-left-box">
					确认密码
				</view>
				<text class="info-box">
					<uv-input border="none" type="password" :customStyle="{height:'100%'}" v-model="confirmpwd" placeholder="请输入确认密码"></uv-input>
					
				</text>
			</view>
			
			
		</view>
		<view class="backOrSave boxshadow20">
			<view class="back-box" @click="back">
				<image src="/static/images/back.png" mode="widthFix"></image>
			</view>
			<view class="save-box" @click="save">
				<image src="/static/images/save.png" mode="widthFix"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateColumn:[
					['全部','男','女',]
				],
				cateColumn2:[],
				cateColumn3:[],
				confirmpwd:"",
				form:{
					oldpassword:"",
					newpassword:""
				}
			};
		},
			
		methods:{
				back(){
					uni.navigateBack()
				},
				save(){
					if(!this.form.oldpassword) return this.$utils.msg('请输入原密码')
					if(!this.form.newpassword) return this.$utils.msg('请输入新密码')
					if(!this.confirmpwd) return this.$utils.msg('请输入确认密码')
					if(!this.form.newpassword==this.confirmpwd) return this.$utils.msg('两次密码输入不一致')
						
					this.$api.resetpwd(this.form).then(res=>{
							
						if(res.code==1){
							this.$utils.msg('修改成功,请重新登录')
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/login/login'
								})
							},1000)
							
						}else{
							this.$utils.msg(res.msg)
						}
					})
				}
			
		}
		
	}
</script>

<style lang="scss" scoped>
.accountManage{
	 padding: 20rpx;
	.top-box{
		width: 100%;
		border-radius: 16rpx;
		margin-bottom: 46rpx;
		background-color: #FFFFFF;
		.item-box{
			width: 100%;
			height: 128rpx;
			border-bottom: 1px solid #f7f7f7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0px 16rpx;
			box-sizing: border-box;
			.item-left{
				height: 44rpx;
				display: flex;
				align-items: center;
				image{
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}
			}
			.item-right{
				max-width: 80%;
				overflow-x: hidden;
				color: #a7a9b0;
			}
			.edit-box{
				width: 206rpx;
				color:#222cf1;
				text-align: center;
			}
		}
	}
	.bottom-box{
		width: 100%;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		padding: 16rpx;
		margin-bottom: 26rpx;
		.b-item-box,
		.b-item-box-two{
			width: 100%;
			height: 120rpx;
			border: 1px solid #e6e6e6;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 0rpx 12rpx;
			margin-bottom: 24rpx;
			overflow: hidden;
			&:last-child{
				margin-bottom: 0rpx;
			}
			.b-left-box{
				padding: 0 20rpx;
				height: 100rpx;
				// width: 100rpx;
				background-color: #e5f2fc;
				line-height: 100rpx;
				text-align: center;
				color: #2296e1;
				border-radius: 16rpx;
				
			}
			.info-box{
				height: 100rpx;
				line-height: 100rpx;
				margin-left: 30rpx;
				display: flex;
			}
			.search-box{
				min-width: 80%;
				margin-left: 8rpx;
			}
		}
		.b-item-box-two{
			display: flex;
			justify-content: space-between;
			.b-item-info{
				display: flex;
			}
		}
		.b-item-box-three{
			width: 100%;
			height: 120rpx;
			margin-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			.three-first-box{
				width: 290rpx;
				height: 120rpx;
				border: 1px solid #e6e6e6;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				padding: 0rpx 12rpx;
				.first-left{
					height: 100rpx;
					width: 100rpx;
					background-color: #e5f2fc;
					line-height: 100rpx;
					text-align: center;
					color: #2296e1;
					border-radius: 16rpx;
				}
				.first-right{
					margin-left: 30rpx;
					display: flex;
					width: 50%;
					justify-content: space-between;
				}
			}
			.three-second-box{
				width: 180rpx;
				height: 120rpx;
				border: 1px solid #e6e6e6;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0rpx 12rpx;
			}
		}
	}
	.backOrSave{
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0px 12rpx;
		height: 140rpx;
		border-radius: 16rpx;
		.back-box,
		.save-box{
			height: 106rpx;
			width: 336rpx;
			// background-color: #e5f2fc;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.info-box{
				display: flex;
				justify-content: center;
				align-items: center;
				color: #0484dc;
				font-size: 32rpx;
				image{
					width: 42rpx;
					height: 42rpx;
					margin-right: 24rpx;
				}
			}
			
		}
		.save-box{
			background-color: #5eb5f1;
			.info-box{
				color: #FFFFFF;
			}
		}
	}
}
</style>
